<template>
  <div style="margin-top: 15px">
    <el-input
      placeholder="请输入内容"
      v-model="input"
      class="input-with-select"
      @keyup.enter.native="search"
    >
      <el-select v-model="select" slot="prepend" placeholder="请选择">
        <el-option label="学号" value="1"></el-option>
        <el-option label="姓名" value="2"></el-option>
        <el-option label="专业" value="3"></el-option>
      </el-select>
      <el-button
        @click="search()"
        slot="append"
        icon="el-icon-search"
      ></el-button>
    </el-input>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="学号" width="120"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="major" label="专业" width="120"> </el-table-column>
      <el-table-column prop="grade" label="成绩" width="120"> </el-table-column>
      <el-table-column prop="student_class" label="班级" width="120">
      </el-table-column>
      <el-table-column prop="address" label="家庭地址" width="300">
      </el-table-column>
      <el-table-column prop="phone" label="手机" width="120"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="showDiolog(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" @click="showForm(scope.row)" size="small"
            >修改</el-button
          >
        </template>
      </el-table-column>
      <a-modal
        title="修改信息"
        :visible="formVisible"
        ok-text="确认"
        cancel-text="取消"
        @ok="handleOk('ruleForm')"
        @cancel="handleCancel('ruleForm')"
      >
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名字" prop="name">
            <el-input styel="width:140px" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="major">
            <el-input v-model="ruleForm.major"></el-input>
          </el-form-item>
          <el-form-item label="成绩" prop="grade">
            <el-input v-model="ruleForm.grade"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="student_class">
            <el-input v-model="ruleForm.student_class"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-form>
      </a-modal>
    </el-table>
  </div>
</template>

<script>
let checkGrade = (rule, value, callback) => {
  setTimeout(() => {
    if (isNaN(value)) {
      callback(new Error('请输入数字值'))
    } else {
      callback()
    }
  }, 1000)
}
export default {
  name: 'Home',
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formVisible: false,
      row: null,
      input: '',
      select: '',
      ruleForm: {
        id: null,
        name: null,
        major: null,
        grade: null,
        student_class: null,
        address: null,
        phone: null,
        email: null,
      },
      rules: {
        grade: [{ validator: checkGrade, trigger: 'blur' }],
      },
    }
  },

  methods: {
    showDiolog(row) {
      let that = this
      this.dialogVisible = true
      this.row = row
      this.$confirm({
        title: '你要删除吗?',
        content: '想清楚!',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          that.deleteStudent()
          console.log('OK')
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },

    showForm(row) {
      this.formVisible = true
      this.row = row
    },

    search() {
      if (this.select !== '') {
        if (this.input !== '') {
          if (this.select === '1') {
            this.getStudentById(this.input)
          } else if (this.select === '2') {
            this.getStudentByName(this.input)
          } else {
            this.getStudentByMajor(this.input)
          }
        } else {
          this.$message.error('搜索内容不能为空')
        }
      } else {
        this.$message.error('请输入你的选择')
      }
    },

    getStudentById(id) {
      let that = this
      this.$axios.get('/getStudentById/' + id).then(
        function (response) {
          console.log(response.data)
          that.tableData = response.data
        },
        function (err) {
          console.log(err)
        }
      )
    },

    getStudentByName(name) {
      let that = this
      this.$axios.get('/getStudentByName/' + name).then(
        function (response) {
          console.log(response.data)
          that.tableData = response.data
        },
        function (err) {
          console.log(err)
        }
      )
    },

    getStudentByMajor(major) {
      let that = this
      this.$axios.get('/getStudentByMajor/' + major).then(
        function (response) {
          console.log(response.data)
          that.tableData = response.data
        },
        function (err) {
          console.log(err)
        }
      )
    },

    deleteStudent() {
      let id = this.row.id
      let that = this
      this.$axios.get('/deleteStudent/' + id).then(
        function (response) {
          console.log(response)
          that.$message.success('删除成功!')
          that.search()
        },
        function (err) {
          console.log(err)
          that.$message.error('删除失败!')
        }
      )
    },

    updateStudent() {
      let that = this
      this.ruleForm.id = this.row.id
      this.$axios
        .post('/updateStudent', that.ruleForm, {
          headers: { 'content-type': 'application/json' },
        })
        .then(
          function (response) {
            console.log(response)
            that.$message.success('修改成功')
            that.search()
          },
          function (err) {
            console.log(err)
          }
        )
    },

    handleOk(formName) {
      this.updateStudent()
      this.$refs[formName].resetFields()
      this.formVisible = false
    },
    handleCancel(formName) {
      console.log('Clicked cancel button')
      this.$refs[formName].resetFields()
      this.formVisible = false
    },
  },
}
</script>
<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
